<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<!--
        M = moveto M命令其实就是把画笔移动到某个点

        L = lineto L命令会绘制一点并且和之前的点（也就是L命令前面的点）连成一条直线。

        H = horizontal lineto H命令可以从之前的点绘制一条水平的直线，H命令可以等价于y值和之前点相同的L命令

        V = vertical lineto V命令可以从之前的点绘制一条垂直的直线，V命令可以等价于x值和之前点相同的L命令

        C = curveto C命令可用来绘制一条三次贝塞尔曲线，相对于二次贝塞尔曲线多了一个控制点。
			语法：C x1 y1, x2 y2, x y 或者 c x1 y1, x2 y2, x y
			参数：x、y为终点位置，x1、y1为曲线起始点的控制点，x2、y2为曲线终止的控制点。

        S = smooth curveto 三次贝塞尔曲线的S命令和二次贝塞尔曲线的T命令比较相似。
			语法：S x2 y2, x y 或者 s x2 y2, x y
			参数：x、y为终点位置，x2、y2为曲线终止的控制点。

        Q = quadratic Bézier curve Q命令可以用来绘制一条二次贝塞尔曲线，二次贝塞尔曲线需要一个控制点，用来确定起点和终点的曲线斜率。
			语法：Q x1 y1, x y 或者 q x1 y1, x y
			参数：x、y为终点位置，x1、y1为控制点。

        T = smooth quadratic Bézier curveto T命令时一个延长二次贝塞尔曲线的简化命令，T命令可以通过前一个控制点推断出后一个控制点，

        A = elliptical Arc A命令用于画弧形，它可以截取圆或椭圆的弧形成的曲线
			语法： A rx ry x-axis-rotation large-arc-flag sweep-flag x y 或者 a rx ry x-axis-rotation large-arc-flag sweep-flag x y
			参数：
				rx、ry分别为X轴的半径和Y轴的半径
				x-axis-rotation为弧度在X轴的旋转角度
				large-arc-flag决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧
				sweep-flag为弧的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧
				x、y为弧形的终点

        Z = closepath Z命令是一个闭合命令，他会从当前点画一条直线到路径的起始点。

        以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
     -->
		<p>L</p>
		<svg width="500" height="200" style="color: red;">
			<!-- TODO 这里 currentColor 应该是个关键字，有点继承的意思-->
			<path d="M150 10 L50 150 L250 150 Z" style="fill:currentColor" />
		</svg>

		<p>Q</p>
		<svg width="500" height="200">
			<path d="M50 150 Q 150 10 250 150" fill="none" style="stroke: orange" />
		</svg>

		<p>T</p>
		<svg width="500" height="200">
			<path d="M50 150 Q 150 10 250 150 T 400 0" fill="none" style="stroke: red" />
		</svg>

		<p>C</p>
		<svg width="500" height="200">
			<path d="M50 150 C 150 10, 250 150, 400 0" fill="none" style="stroke: deeppink" />
		</svg>

		<p>S</p>
		<svg width="500" height="200">
			<path d="M50 150 C 150 10, 250 150, 400 100 S 500 100, 500 0" fill="none" style="stroke: blue" />
		</svg>

		<p>A</p>
		<svg width="500" height="300">
			<path d="M100 150  A 80 100 0 0 1 300 150" fill="none" style="stroke: #ff0000" />
			<path d="M100 150  A 80 100 45 0 1 300 150" fill="none" style="stroke: blue" />
		</svg>

		<style>
			svg {
				/* 默认 宽300 高150 */
				border: 1px solid red;
			}
		</style>
	</body>
</html>
